<template>
	<z-paging ref="pagingRef" v-model="dataList" @query="queryList">
		<template #top>
			<uv-navbar title="订单查询" :titleStyle="{fontSize:'18px'}" :placeholder="true" autoBack>
				<template #right>
					<image style="width: 40rpx;height: 40rpx;" src="/static/home/what_nav_icon.png" mode="aspectFit" @tap="showRole"></image>
				</template>
			</uv-navbar>
			<view class="order-filter">
				<!-- 类型筛选 -->
				<view class="order-menu-box">
					<uv-tabs :list="menuList" :activeStyle="{color:'#5F56EF',fontSize:'28rpx'}" :inactiveStyle="{color:'#666666',fontSize:'28rpx'}" :itemStyle="{height:'80rpx'}" lineColor="#5F56EF" @click="selectItem"></uv-tabs>
				</view>
				<!-- 日期选择 -->
				<view class="order-date-box">
					<view class="order-date-font" @tap="showSelectDate">
						<text>{{selectDateValueString}}</text>
						<xh-icon icon="icon_shanglajiantou"></xh-icon>
					</view>
					<view class="order-date-font">
						<text>{{selectType == 2 ? '日统计：' : '月统计：'}}</text>
						<text>¥{{totalAmount}}</text>
					</view>
				</view>
				<!-- 搜索框 -->
				<view class="order-search-box">
					<xh-search-bar v-model="keywords" @searchResult="searchResult"></xh-search-bar>
				</view>
			</view>
		</template>
		<view class="order-list">
			<view class="order-list-item" v-for="item in dataList" :key="item.oderId" @tap="showOrderInfo(item)">
				<view class="order-list-item-left">
					<text>{{selectType == 1 ? item.merName : item.mercName}}</text>
					<text class="order-list-item-left-space">{{selectType == 1 ? item.ksnNo : item.deviceId}}</text>
					<text class="order-list-item-left-space">{{selectType == 1 ? item.transOrder : `${item.type}(${item.oderId})`}}</text>
					<text class="order-list-item-left-space">{{selectType == 1 ? item.transTime : item.dateTime}}</text>
				</view>
				<view class="order-list-item-right">
					<text>¥{{selectType == 1 ? item.transAmount : item.amount}}</text>
					<xh-icon icon="icon_jiantou"></xh-icon>
				</view>
				<view class="line"></view>
			</view>
		</view>
		<uv-datetime-picker ref="datePicker_jy" v-model="selectDateValue_jy" mode="year-month" @confirm="confirm">
		</uv-datetime-picker>
		<uv-datetime-picker ref="datePicker_llk" v-model="selectDateValue_llk" mode="year-month" @confirm="confirm">
		</uv-datetime-picker>
		<uv-datetime-picker ref="datePicker_fwf" v-model="selectDateValue_fwf" mode="date" @confirm="confirm">
		</uv-datetime-picker>
		<xh-role-pop ref="roleRef"></xh-role-pop>
	</z-paging>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref, computed } from 'vue'
	import dayjs from 'dayjs'
	import { getTradeOrderList,getFlowCardOrderList,getServiceOrderList,getTradeOrderMonthStatistics,getFlowCardOrderMonthStatistics,getServiceOrderDayStatistics } from '@/common/api/api.js'
	const datePicker_jy = ref(null)
	const datePicker_llk = ref(null)
	const datePicker_fwf = ref(null)
	const roleRef = ref(null)
	const pagingRef = ref(null)
	const selectType = ref(0)
	// 选择交易日期时间戳
	const selectDateValue_jy = ref(Number(new Date()))
	// 选择流量卡日期时间戳
	const selectDateValue_llk = ref(Number(new Date()))
	// 选择服务费日期时间戳
	const selectDateValue_fwf = ref(Number(new Date()))
   
	// 分类菜单
	const menuList = ref([{ name: '交易', type: 0 }, { name: '流量卡', type: 1 }, { name: '服务费', type: 2 }])
   const dataList = ref([])
   // 汇总金额
   const totalAmount = ref(0)
   const keywords = ref('')
	// 选择的日期格式化字符串
	const selectDateValueString = computed(() => {
		if (selectType.value == 0) {
			return dayjs(selectDateValue_jy.value).format('YYYY年MM月')
		} else if (selectType.value == 1) {
			return dayjs(selectDateValue_llk.value).format('YYYY年MM月')
		} else {
			return dayjs(selectDateValue_fwf.value).format('YYYY年MM月DD日')
		}
	})
	// 选择交易类型
	const selectItem = (item) => {
		selectType.value = item.type
		dataList.value = []
		totalAmount.value = 0
		pagingRef.value.reload()
	}
	// 选择日期
	const showSelectDate = () => {
		if (selectType.value == 0) {
			datePicker_jy.value.open()
		} else if (selectType.value == 1) {
			datePicker_llk.value.open()
		} else {
			datePicker_fwf.value.open()
		}
	}
	// 日期选择回调
	const confirm = (res) => {
		if (selectType.value == 0) {
			selectDateValue_jy.value = res.value
		} else if (selectType.value == 1) {
			selectDateValue_llk.value = res.value
		} else {
			selectDateValue_fwf.value = res.value
		}
		console.log(res)
		pagingRef.value.reload()
	}
	// 查看规则
	const showRole = ()=>{
		roleRef.value.show({title:'说明',content:'只显示您直营商户相关业务数据'})
	}
	//搜索结果
	const searchResult = ()=>{
		pagingRef.value.reload()
	}
	//订单详情
	const showOrderInfo = (item) => {
		const dataStr = encodeURIComponent(JSON.stringify(item))
		uni.navigateTo({
			url: `/pages/home/order-search/order-detail/order-detail?type=${selectType.value}&data=${dataStr}`
		})
	}
	// 获取统计金额
	const getStatisticsMoney = async ()=>{
		let params = {}
		if(selectType.value == 0){
			params.dateType = '1'
			params.startDate = dayjs(selectDateValue_jy.value).startOf('month').format('YYYY-MM-DD')
			params.endDate = dayjs(selectDateValue_jy.value).endOf('month').format('YYYY-MM-DD')
			const res = await getTradeOrderMonthStatistics(params)
			totalAmount.value = res.result.totalAmount
		}
		else if(selectType.value == 1){
			params.transTimeStart = dayjs(selectDateValue_llk.value).startOf('month').format('YYYY-MM-DD')
			params.transTimeEnd = dayjs(selectDateValue_llk.value).endOf('month').format('YYYY-MM-DD')
		    if(!uni.$uv.test.empty(keywords.value)) {
		    	params.ksnNo = keywords.value
		    }
			const res = await getFlowCardOrderMonthStatistics(params)
			totalAmount.value = res.result.totalAmount
		}
		else{
			params.transTimeStart = dayjs(selectDateValue_fwf.value).format('YYYY-MM-DD')
			params.transTimeEnd = dayjs(selectDateValue_fwf.value).format('YYYY-MM-DD')
			if(!uni.$uv.test.empty(keywords.value)) {
				params.ksnNo = keywords.value
			}
			const res = await getServiceOrderDayStatistics(params)
			totalAmount.value = res.result.totalAmount
		}
	}
	
	// 获取列表数据
	const queryList = async (pageNo) => {
		if(pageNo == 1){
			getStatisticsMoney()
		}
		let params = {}
		if(selectType.value == 0){
			params.dateType = '1'
			params.startDate = dayjs(selectDateValue_jy.value).startOf('month').format('YYYY-MM-DD')
			params.endDate = dayjs(selectDateValue_jy.value).endOf('month').format('YYYY-MM-DD')
			if(!uni.$uv.test.empty(keywords.value)) {
				params.ksnNo = keywords.value
			}
			const res = await getTradeOrderList(params, pageNo)
			const list = res.result
			if(pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value,...list]
			pagingRef.value.completeByTotal(list,res.page.totalElements)
		}
		else if(selectType.value == 1){
			params.transTimeStart = dayjs(selectDateValue_llk.value).startOf('month').format('YYYY-MM-DD')
			params.transTimeEnd = dayjs(selectDateValue_llk.value).endOf('month').format('YYYY-MM-DD')
			if(!uni.$uv.test.empty(keywords.value)) {
				params.ksnNo = keywords.value
			}
			const res = await getFlowCardOrderList(params, pageNo)
			const list = res.result
			if(pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value,...list]
			pagingRef.value.completeByTotal(list,res.page.totalElements)
		}
		else{
			params.transTimeStart = dayjs(selectDateValue_fwf.value).format('YYYY-MM-DD')
			params.transTimeEnd = dayjs(selectDateValue_fwf.value).format('YYYY-MM-DD')
			if(!uni.$uv.test.empty(keywords.value)) {
				params.ksnNo = keywords.value
			}
			const res = await getServiceOrderList(params, pageNo)
			const list = res.result
			if(pageNo == 1) {
				dataList.value = []
			}
			dataList.value = [...dataList.value,...list]
			pagingRef.value.completeByTotal(list,res.page.totalElements)
		}
	}
	
</script>

<style lang="scss" scoped>
	.order-menu-box {
		display: flex;
		align-items: center;
		width: 100rpx;

	}

	.order-date-box {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.order-date-font {
			font-size: 26rpx;
		}

		.order-date-font {
			font-size: 26rpx;
		}
	}

	.order-search-box {
		padding: 0 30rpx 30rpx;
	}

	.order-list {
		background-color: #fff;

		.order-list-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx;
			position: relative;

			.order-list-item-left {
				display: flex;
				flex-direction: column;
				font-size: 26rpx;

				.order-list-item-left-space {
					margin-top: 16rpx;
				}
			}

			.order-list-item-right {
				font-size: 26rpx;
				color: $xh-orange-color;
			}
		}
	}
</style>